<template>
  <div class="comp-wrap comp-table ignore">
    <el-table ref="groupTable" class="group-table" :data="listData" row-key="id" :tree-props="{ children: 'infoList' }" @row-click="clickRow">
      <el-table-column fixed prop="groupNmae" label="项目名称" width="150">
        <template #default="{ row }">
          <van-space size="2px" :class="{ level: true, ['level' + row.level]: true }">
            <van-icon v-if="row.level == 1" :class="['van-expand-icon', row.expanded ? 'open' : 'close']" name="play" />
            <van-image v-if="row.level == 2" class="headimg" round :src="row.imageurl"></van-image>
            {{ row.level == 2 ? row.projectName : row.groupNmae + (row.infoList ? `（${row.infoList?.length}）` : '') || '-' }}
          </van-space>
        </template>
      </el-table-column>
      <el-table-column>
        <template #header>
          <span>投资信息</span>
        </template>
        <el-table-column prop="agreementAmt" width="120" label="协议金额(万)"></el-table-column>
        <el-table-column prop="paymentAmt" width="120" label="打款金额(万)"></el-table-column>
        <el-table-column prop="downPaymentDate" width="120" label="首次付款日期"></el-table-column>
        <el-table-column width="120" label="项目进入轮次"></el-table-column>
        <el-table-column width="120" label="进入轮次估值(亿)"></el-table-column>
        <el-table-column width="120" label="公司当前轮次"></el-table-column>
      </el-table-column>
      <el-table-column>
        <template #header>
          <span>当前回报</span>
        </template>
        <el-table-column width="120" label="已实现(万)"></el-table-column>
        <el-table-column width="120" label="未实现(万)"></el-table-column>
        <el-table-column width="120" label="总回报金额"></el-table-column>
        <el-table-column width="120" label="总回报倍数"></el-table-column>
        <el-table-column width="120" label="当前IRR(%)"></el-table-column>
        <el-table-column width="120" label="持有股比(%)"></el-table-column>
        <el-table-column width="120" label="最新估值(亿)"></el-table-column>
        <el-table-column width="120" label="基金DPI贡献度"></el-table-column>
      </el-table-column>
      <el-table-column>
        <template #header>
          <span>最新退出预测</span>
        </template>
        <el-table-column width="120" label="退出总目标(万)"></el-table-column>
        <el-table-column width="120" label="其中今年目标(万)"></el-table-column>
        <el-table-column width="120" label="预计退出估值(亿)"></el-table-column>
        <el-table-column width="120" label="预计退出时间"></el-table-column>
        <el-table-column width="120" label="预计退出方式"></el-table-column>
        <el-table-column width="120" label="预计回报倍数"></el-table-column>
      </el-table-column>
      <el-table-column>
        <template #header>
          <span>IC时退出预测</span>
        </template>
        <el-table-column width="120" label="退出总目标(万)"></el-table-column>
        <el-table-column width="120" label="其中今年目标(万)"></el-table-column>
        <el-table-column width="120" label="预计退出估值(亿)"></el-table-column>
        <el-table-column width="120" label="预计退出时间"></el-table-column>
        <el-table-column width="120" label="预计退出方式"></el-table-column>
        <el-table-column width="120" label="预计回报倍数"></el-table-column>
      </el-table-column>
      <el-table-column>
        <template #header>
          <span>项目信息</span>
        </template>
        <el-table-column width="120" label="公司全称"></el-table-column>
        <el-table-column width="120" label="投资状态"></el-table-column>
        <el-table-column width="120" label="所在城市"></el-table-column>
        <el-table-column width="120" label="所属基金"></el-table-column>
        <el-table-column width="120" label="退出状态"></el-table-column>
        <el-table-column width="120" label="项目联络人"></el-table-column>
        <el-table-column width="120" label="主管合伙人"></el-table-column>
        <el-table-column width="120" label="项目联络人"></el-table-column>
        <el-table-column width="120" label="公司所在城市"></el-table-column>
        <el-table-column width="120" label="主行业"></el-table-column>
        <el-table-column width="120" label="子行业(非标)"></el-table-column>
        <el-table-column width="120" label="投资阶段"></el-table-column>
        <el-table-column width="120" label="是否522项目"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import _ from 'underscore';
import { ElTable, ElTableColumn } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
import { watch, ref } from 'vue';
// const data = reactive({});
// const name = ref();
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
});
const listData = ref([]);
const groupTable = ref();
const clickRow = (row) => {
  if (row.level == 2) {
    router.push({ name: 'home-detail', params: { id: row.id } });
    return false;
  }
  listData.value.map((item) => {
    if (row.id == item.id) {
      item.expanded = !item.expanded;
    }
  });
  groupTable.value.toggleRowExpansion(row);
};
const initTableData = (data) => {
  const totalRow = _.omit(data, 'records');
  //遍历处理table数据
  listData.value = [totalRow, ...data.records].map((item, idx1) => {
    item.id = idx1;
    item.level = 1;
    item.infoList = item.infoList?.map((item2) => {
      // item2.id = idx1 + '_' + idx2;
      item2.level = 2;
      return item2;
    });
    return item;
  });
  totalRow.groupNmae = '合计';
  totalRow.level = 0;
};
watch(
  () => props.data,
  (data) => {
    !_.isEmpty(data) && initTableData(data);
  }
);
</script>
<style scoped lang="less">
@import './list-table.less';
</style>
